﻿<template>
  <div>
    <!-- 左边一个logo -->
    <div class = 'left'>
      <img src = "static/style/theme_dark/images/loginLogo.png" alt="" style = 'width:50px;height:50px;'>
    </div>
    <!-- 展示菜单 -->
    <el-menu class = "menubarTop-el-menu" :default-active = "onRoutes" unique-opened @select = "handleSelect" mode = 'horizontal'>
      <template v-for = "item in items">
        <!-- 有二级菜单时 -->
        <template v-if = "item.children.length">
          <!-- 站内路由时 -->
          <el-submenu :index = "item.function_no" :key = "item.function_no" v-if = "item.url_type === 'Router'" popper-class = 'collapse_pop_top'>
            <template slot = "title">
              <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
            </template>
            <el-menu-item v-for = "(subItem, i) in item.children" :key = "i" :index = "subItem.function_url">
              {{ subItem.function_name }}
            </el-menu-item>
          </el-submenu>
          <!-- 站外链接时 -->
          <el-submenu :index = "item.function_no" :key = "item.function_no" v-if = "item.url_type === 'URI'" popper-class = 'collapse_pop_top'>
            <template slot = "title">
              <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
            </template>
            <el-menu-item v-for = "(subItem, i) in item.children" :key = "i" disabled :index = "subItem.function_url" class = 'silder_linkContent'>
              <a :href = "subItem.function_url.indexOf('?') > -1 ? subItem.function_url + '&_token='+ getQuery : subItem.function_url + '?_token='+ getQuery"
                :target = "item.target ? item.target : '_blank'" class = 'linkEl'>{{ subItem.function_name }}</a>
            </el-menu-item>
          </el-submenu>
        </template>
        <!-- 只有一级菜单 -->
        <template v-else>
          <!-- 站内路由时 -->
          <el-menu-item :index = "item.function_url" :key = "item.function_no" v-if = "item.url_type === 'Router'">
            <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
          </el-menu-item>
          <!-- 站外链接时 -->
          <el-menu-item :index = "item.function_url" disabled :key = "item.function_no" v-if = "item.url_type === 'URI'" class = 'silder_linkContent' @click.native = 'outLinkClick(item)'>
            <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: []
    }
  },
  computed: {
    onRoutes () {
      return this.$route.fullPath
    },
    getQuery () {
      return sessionStorage.getItem('token')
    }
  },
  created () {
    this.getMenu()
  },
  methods: {
    getMenu () {
      this.$get('/menu').then(data => {
        if (data.status === 200) {
          this.items = this.$toTree(data.data.result, false)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 菜单激活时
    handleSelect (key, keyPath) {
      this.$router.push(key)
    },
    // 点击外部链接时
    outLinkClick (item) {
      var href = item.function_url.indexOf('?') > -1 ? (item.function_url + '&_token=' + sessionStorage.getItem('token')) : (item.function_url + '?_token=' + sessionStorage.getItem('token'))
      if (item.target) {
        window.open(href, '_blank')
      } else {
        window.location.href = href
      }
    }
  }
}
</script>
